<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <div class="demo">
        <span class="demonstration">默认</span>
        <sdn-slider v-model="value1"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">自定义初始值</span>
        <sdn-slider v-model="value2"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">隐藏 Tooltip</span>
        <sdn-slider v-model="value3" :show-tooltip="false"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">格式化 Tooltip</span>
        <sdn-slider v-model="value4" :format-tooltip="formatTooltip"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">禁用</span>
        <sdn-slider v-model="value5" disabled></sdn-slider>
      </div>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      value1: 0,
      value2: 50,
      value3: 36,
      value4: 48,
      value5: 42
    }
  },
  methods: {
    formatTooltip(val) {
      return val / 100;
    }
  },
  setup() {
    const btnDesc = {
      title: "Slider 滑块",
      describe: "通过拖动滑块在一个固定区间内进行选择",
      codeBlock: `<div class="demo">
        <span class="demonstration">默认</span>
        <sdn-slider v-model="value1"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">自定义初始值</span>
        <sdn-slider v-model="value2"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">隐藏 Tooltip</span>
        <sdn-slider v-model="value3" :show-tooltip="false"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">格式化 Tooltip</span>
        <sdn-slider v-model="value4" :format-tooltip="formatTooltip"></sdn-slider>
      </div>
      <div class="demo">
        <span class="demonstration">禁用</span>
        <sdn-slider v-model="value5" disabled></sdn-slider>
      </div>`,
      attrs: [
        {
          "name": "value / v-model",
          "describe": "绑定值",
          "type": "number",
          "emun": "—",
          "default": "0"
        }, {"name": "min", "describe": "最小值", "type": "number", "emun": "—", "default": "0"}, {
          "name": "max",
          "describe": "最大值",
          "type": "number",
          "emun": "—",
          "default": "100"
        }, {"name": "disabled", "describe": "是否禁用", "type": "boolean", "emun": "—", "default": "FALSE"}, {
          "name": "step",
          "describe": "步长",
          "type": "number",
          "emun": "—",
          "default": "1"
        }, {
          "name": "show-input",
          "describe": "是否显示输入框，仅在非范围选择时有效",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "show-input-controls",
          "describe": "在显示输入框的情况下，是否显示输入框的控制按钮",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "input-size",
          "describe": "输入框的尺寸",
          "type": "string",
          "emun": "large / medium / small / mini",
          "default": "small"
        }, {
          "name": "show-stops",
          "describe": "是否显示间断点",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "show-tooltip",
          "describe": "是否显示 tooltip",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "format-tooltip",
          "describe": "格式化 tooltip message",
          "type": "function(value)",
          "emun": "—",
          "default": "—"
        }, {
          "name": "range",
          "describe": "是否为范围选择",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "vertical",
          "describe": "是否竖向模式",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "height",
          "describe": "Slider 高度，竖向模式时必填",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {"name": "label", "describe": "屏幕阅读器标签", "type": "string", "emun": "—", "default": "—"}, {
          "name": "debounce",
          "describe": "输入时的去抖延迟，毫秒，仅在show-input等于true时有效",
          "type": "number",
          "emun": "—",
          "default": "300"
        }, {
          "name": "tooltip-class",
          "describe": "tooltip 的自定义类名",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "marks",
          "describe": "标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式",
          "type": "object",
          "emun": "—",
          "default": "—"
        }],
      events: [{"name": "change", "describe": "值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）", "params": "改变后的值"}, {
        "name": "input",
        "describe": "数据改变时触发（使用鼠标拖曳时，活动过程实时触发）",
        "params": "改变后的值"
      }],
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
